<template>
  <base-breadcrumb>
    <searchData :searchData="searchArr" @search="handleSearch"></searchData>

    <a-card>
      <a-button class="mb12" type="primary" v-btnPermission="'tm_047_add_01'" @click="openModal('add')" v-if="hideBuquBtn()">新增复核项目</a-button>
      <a-table
        :pagination="pagination"
        :rowClassName="rowClassName"
        :loading="loading"
        :customRow="customRow"
        rowKey="id"
        :columns="columns"
        :data-source="list"
        :expandedRowKeys="expandedRowKeys"
        :expandIcon="expandIcon"
      >
        <div slot="status" slot-scope="text">
          {{ text ? '可用' : '不可用' }}
        </div>
        <template slot="actions" slot-scope="text, record" class="pub-table-list-action">
          <MoreButton>
            <a v-btnPermission="'tm_047_loo_02'" @click="openModal('details', record)">查看</a>
            <a v-btnPermission="'tm_047_edi_03'" @click="openModal('edit', record)">编辑</a>
            <a v-btnPermission="'tm_047_addcon_04'" @click="openModal('add', record, 'addContent')" v-if="record.children">添加内容</a>
          </MoreButton>
        </template>
      </a-table>
    </a-card>
    <div class="modal">
      <assembly-modal ref="assemblyModal" :visible.sync="assemblyVisible" :form="form" :type="type" @ok="getData()" @closeModal="closeModal"></assembly-modal>
      <children-modal ref="childrenModal" :visible.sync="childrenVisible" :form="form" :type="type" @ok="getData()" @closeModal="closeModal"></children-modal>
    </div>
  </base-breadcrumb>
</template>

<script>
import { reviewContentPage } from '@/api/technical/reviewContent'
import assemblyModal from './assemblyModal'
import childrenModal from './childrenModal'

export default {
  name: 'a' + Date.now(),
  components: {
    assemblyModal,
    childrenModal
  },
  data() {
    return {
      //页码数据
      pagination: {
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 10, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        showTotal: (total) => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.pagination.defaultCurrent = 1
          this.pagination.defaultPageSize = pageSize
          this.handleSearch()
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.pagination.defaultCurrent = current
          this.pagination.defaultPageSize = size
          this.handleSearch()
        }
      },
      // 父组件模态框是否展开
      assemblyVisible: false,
      // 子组件模态框是否展开
      childrenVisible: false,
      searchArr: [
        {
          name: '复核项目',
          type: 'input',
          value: 'name'
        },
        {
          name: '复核内容',
          type: 'input',
          value: 'content'
        }
      ],
      //模态框表单数据
      form: {},
      //表格数据
      list: [],
      //组件类型
      type: '',
      loading: false,
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          isHidden: true,
          width: 140,
          customRender() {
            return Number(arguments[2]) + 1
          }
        },
        {
          title: '复核项目',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
          width: 300,
        },
        {
          title: '复核内容',
          dataIndex: 'content',
          scopedSlots: { customRender: 'content' },
          
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 160,
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: 200,
          scopedSlots: { customRender: 'actions' }
        }
      ],
      selectRow: {
        id: null
      },
      rowClassName: (r) => {
        return r.id === this.selectRow.id ? 'select' : ''
      },
      expandedRowKeys: [],
      customRow: (record) => {
        return {
          on: {
            // 事件
            click: (event) => {
              this.onExpand(record)
            }
          }
        }
      },
      params: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    /**
     * @description:              打开模态框
     * @param {value, record}     参数
     * @return {Promise}          接口Promise
     */
    openModal(value, record, ident) {
      this.type = value
      this.form = {}
      if (!record) {
        this.assemblyVisible = true
        return
      }
      console.log('recordrecord',record)
      this.form = record;
      // let data = this.list.filter(item=>{
      //   return item.id === record.id
      // })
      // this.form = data[0];
      // cosnole
      if (ident) {
        this.childrenVisible = true
        return
      }
      this.form.status = this.form.status ? 1 : 0
      if (record?.children) {
        this.assemblyVisible = true
      } else if (record?.checkId) {
        this.childrenVisible = true
      }
    },
    /**
     * @description:         搜索
     * @param {val}          参数
     * @return {Promise}     接口Promise
     */
    handleSearch(val) {
      if (val) {
        this.params = val
      }
      this.getData()
    },
    /**
     * @description:         请求列表接口
     * @param {props} props  参数
     * @return {Promise}     接口Promise
     */
    async getData() {
      this.loading = true
      let pageQuery = { pageNum: this.pagination.defaultCurrent, pageSize: this.pagination.defaultPageSize }
      pageQuery.param = { ...this.params }
      let res = await reviewContentPage(pageQuery)
      this.loading = false
      if (res.code == '0') {
        this.list = res?.data?.list || []
        this.pagination.total = res.data.total;
      }
    },
    /**
     * @description:         是否展开
     * @param {props} props  参数
     * @return {Promise}     接口Promise
     */
    expandIcon(props) {
      if (props.record.children && props.record.children.length) {
        if (props.expanded) {
          //有数据-展开时候图标
          return <div role="button" tabIndex="0" aria-label="关闭行" class="ant-table-row-expand-icon ant-table-row-expanded"></div>
        } else {
          //有数据-未展开时候图标
          return <div role="button" tabIndex="0" aria-label="展开行" class="ant-table-row-expand-icon ant-table-row-collapsed"></div>
        }
      } else {
        //无数据-图标
        return <span class="ant-table-row-expand-icon ant-table-row-spaced"></span>
      }
    },
    /**
     * @description:              关闭模态框
     * @param {assemblyVisible}   参数
     * @return {Promise}          接口Promise
     */
    closeModal() {
      this.assemblyVisible = false
      this.childrenVisible = false
      this.getData()
    },
    onExpand(record) {
      // console.log('recordrecord', record)
      if (!this.editing) {
        if (this.selectRow.id === record.id) {
          this.selectRow = { id: null }
        } else {
          this.selectRow = record
        }
        this.toggle(record.id)
        // console.log('选中', record)
      }
    },
    toggle(id) {
      let res = this.expandedRowKeys.findIndex((v) => v === id)
      if (res === -1) {
        this.expandedRowKeys.push(id)
      } else {
        this.expandedRowKeys.splice(res, 1)
      }
    }
  }
}
</script>
<style lang="less">
.select {
  background: rgb(230, 247, 255);

  &:hover {
    background: rgb(230, 247, 255);
  }
}
</style>
